<template>
  <div class="index">
    <div style="padding: 0.2rem 0.3rem; position: relative; background: #1989fa; height: 0.9rem;" class="flexcc">
    	<div style="position: absolute; left: 0.3rem; top: 0rem; height: 100%;" class="flexc"><van-icon name="arrow-left" size="0.3rem" style="font-weight: bold;" @click="back()" color="#fff" /></div>
    	<div style="color: #fff;  font-weight: bold;">{{title}}</div>
    </div>
    <div style="padding: 0.3rem;">
    	<van-cell-group>
    	  <!-- <van-field required  :disabled="buyunxu" v-model="all.dwmc" label="拜访单位名称" placeholder="请输入拜访单位名称" /> -->
        <van-field required readonly clickable :disabled="this.$route.query.khmc" :value="all.dwmc" label="拜访单位名称" placeholder="请输入拜访单位名称" @click="suoshuhangyelog = true"/>
    	</van-cell-group>
    	<van-cell-group>
    	  <van-field required v-model="all.bbfrxm" label="被拜访人姓名" placeholder="请输入被拜访人姓名" />
    	</van-cell-group>
    	<van-cell-group>
    	  <van-field required readonly clickable :value="all.xlkh" label="新客户/老客户" placeholder="请选择新客户/老客户" @click="kehuleixinglog = true"/>
    	</van-cell-group>
      <van-cell-group>
        <van-field required v-model="all.bbfrlxfs" label="被拜访人联系方式" placeholder="请输入被拜访人联系方式" />
      </van-cell-group>
      <van-cell-group>
        <van-field required v-model="all.yjtjrs" label="预计体检人数" placeholder="请输入预计体检人数" />
      </van-cell-group>
      <van-cell-group>
        <van-field required v-model="all.yjkdj" label="预计客单价" placeholder="请输入预计客单价" />
      </van-cell-group>
      <van-cell-group>
        <van-field required readonly v-model="all.yjtjsj" label="选择时间" placeholder="请输入选择时间" @click="shijianlog = true" />
      </van-cell-group>
    	<van-cell-group>
    		<van-field required readonly clickable :value="all.bffs" label="拜访方式" placeholder="请选择拜访方式" @click="genjinzhuangtailog = true"/>
    	</van-cell-group>
      <van-cell-group>
        <van-field required v-model="all.bfjg" label="拜访结果" placeholder="请输入拜访结果" />
      </van-cell-group>
      <van-cell-group>
        <van-field required v-model="all.qdkn" label="签单可能性(%)" placeholder="请输入签单可能性(%)" />
      </van-cell-group>
      <van-cell-group>
        <van-field required v-model="all.zysy" label="主要事宜" placeholder="请输入主要事宜" />
      </van-cell-group>
      <van-cell-group>
        <van-field required v-model="all.bz" label="备注" placeholder="请输入备注" />
      </van-cell-group>

      <van-cell-group>
        <div class="flexbc" style="padding: 10px 8px;">
          <div><span style="color: #f00; margin-right: 3px;">*</span>图片</div>
          <div class="flexcc" style="max-width: 4rem;">
            <div class="flexcc">
              <div style="position: relative; margin-right: 10px;" v-for="item in picurl" :key="item.id">
                <div style="position: absolute; right: -10px; top: -10px;"><van-icon name="clear" size="20" @click="shanchupic(item.id)" /></div>
                <img :src="'http://www.trtijian.com/Visit/DownloadImage?id=' + item.id "  style="width: 1rem; height: 1rem;" >
              </div>
            </div>

            <van-uploader :after-read="afterRead1">
              <van-icon name="photo" size="30" color="#1989fa"  />
            </van-uploader>
          </div>
        </div>
      </van-cell-group>

      <van-cell-group>
        <div class="flexbc" style="padding: 10px 8px;">
          <div>附件</div>

          <div class="flexcc" style="max-width: 4rem;">
            <div class="flexcc">
              <div style="position: relative; margin-right: 10px;" v-for="(item,index) in wordurl" :key="item.id">
                <div style="position: absolute; right: -10px; top: -10px;"><van-icon name="clear" size="20" @click="shanchupic(item.id)" /></div>
                <div style="width: 1rem; height: 1rem; background: #ddd;" class="flexcc">文件{{index}}</div>
              </div>
            </div>

            <van-uploader :after-read="afterRead2">
              <van-icon name="add" size="30" color="#1989fa"  />
            </van-uploader>
          </div>

          <!-- <div class="flexcc">
            <div style="position: relative; margin-right: 10px;" v-if="wordurl">
              <div style="position: absolute; right: -10px; top: -10px;"><van-icon name="clear" size="20" @click="wordurl" /></div>
              {{'http://www.trtijian.com/' + wordurl}}
            </div>
            <van-uploader :after-read="afterRead2">
              <van-icon name="add" size="30" color="#1989fa"  />
            </van-uploader>
          </div> -->
        </div>
      </van-cell-group>
      <van-cell-group>
        <div class="flexbc" style="padding: 10px 8px; width: 100%;">
          <div>所在位置</div>
          <div  class="flexcc">
            <div style="margin-right: 0.1rem; width: 3.5rem; word-break: break-all;">{{all.szwz}}</div>
            <van-icon name="location-o" size="30" color="#1989fa" @click="huoquweizhi()" />
          </div>
        </div>
      </van-cell-group>

     <!-- <van-cell-group  v-if="what == 'shenpi'">
        <van-field required v-model="shenpiall.spyj" type="textarea" label="审批意见" placeholder="请输入审批意见" />
      </van-cell-group>
 -->
    	<div class="flexcc" style="margin-top: 0.3rem;" v-if="what == 'add'">
    		<van-button type="info" size="normal" @click="baocun">保存并提交审核</van-button>
    	</div>
<!-- {{cuowu}}
{{cuowu2}}
{{cuowu3}} -->
      <!-- <div class="flexcc" style="margin-top: 0.3rem;" v-if="what == 'gonghai'">
      	<van-button type="info" size="normal" @click="gonghaibaocun">保存并提交审核</van-button>
      </div>

      <div class="flexcc" style="margin-top: 0.3rem;" v-if="what == 'shenpi'">
      	<van-button type="info" size="small" style="margin-right: 0.3rem; padding: 0 15px; border-radius: 0.1rem;" @click="shenpigo(0)">审批通过</van-button>
      	<van-button type="danger" size="small" style=" padding: 0 15px; border-radius: 0.1rem;" @click="shenpigo(1)">审批不通过</van-button>
      </div>

      <div class="flexcc" style="margin-top: 0.3rem;" v-if="what == 'bianji'">
      	<van-button type="info" size="small" style="margin-right: 0.3rem; padding: 0 15px; border-radius: 0.1rem;" @click="xiugai()">保存</van-button>
      	<van-button type="danger" size="small" style=" padding: 0 15px; border-radius: 0.1rem;" @click="back()">返回</van-button>
      </div> -->

    </div>

    <van-popup v-model="shijianlog" position="bottom" >
    	<van-datetime-picker v-model="all.yjtjsj" type="date" title="选择时间" @confirm="shijianConfirm" @cancel="shijianCancel" :min-date="minDate" :max-date="maxDate"  />
    </van-popup>

    <van-popup v-model="kehuleixinglog" position="bottom">
    	<van-picker title="请选择新客户/老客户" show-toolbar :columns="kehuleixing"  @confirm="sexConfirm" @cancel="sexCancel" />
    </van-popup>

    <van-popup v-model="genjinzhuangtailog" position="bottom">
    	<van-picker title="请选择拜访方式" show-toolbar :columns="genjinzhuangtai"  @confirm="genjinConfirm" @cancel="genjinCancel"/>
    </van-popup>

    <van-popup v-model="suoshuhangyelog" position="bottom">
    	<van-picker title="请选择客户" show-toolbar :columns="kehulist" value-key="name"  @confirm="hangyeConfirm" @cancel="hangyeCancel" />
    </van-popup>


  </div>
</template>

<script>
  import * as dd from 'dingtalk-jsapi';
  import { initDingH5RemoteDebug } from "dingtalk-h5-remote-debug"
import { format } from 'echarts';
  var h = document.documentElement.clientWidth / 7.5 + 'px';
  document.documentElement.style.fontSize = h;
	export default {
		name: 'index',
		data() {
			return {
        shijianlog:false,
          title:"新建拜访",
          what:'add',
          all:{

            khid:"",
              "id": "",
              "dwmc": "",
              "bbfrxm": "",
              "xlkh": "",
              "bbfrlxfs": "",
              "yjtjrs": "",
              "yjkdj": "",
              "yjtjsj": "",
              "bffs": "",
              "bfjg": "",
              "qdkn": "",
              "zysy": "",
              "bz": "",
              "szwz": "",
              // "createtime": "",
              "createid": JSON.parse(localStorage.getItem('person')).userid,
              // "createname": "夏兆登"
          },
          minDate: new Date(1900, 0, 1),
          maxDate: new Date(2100, 10, 1),

         zhankai:false,
         kehuleixing:['新客户','老客户'],
         kehuleixinglog:false,
         genjinzhuangtai:['当面拜访','到店参观','到检','其他'],
         genjinzhuangtailog:false,


         shenpiall:{
           khid:"",
           fzrid:"",
           spyj:"",
           spzt:""
         },
         fileList:[],
         buyunxu:false,
         suoshuhangyelog:false,
         kehulist:[],
         picurl:[],
         wordurl:[],
         cuowu:"",
         cuowu2:"",
         cuowu3:""
			}
		},
		created() {
      this.getkehulist()
      if(this.$route.query.id){
        this.buyunxu = true
        axios.get('/Customer/queryCustomerDetail?khid='+this.$route.query.id).then((response)=>{
        	if (response.data.state == 200) {
            this.all = response.data.data
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      }else{
        axios.get('/Common/queryGUID').then((response)=>{
        	if (response.data.state == 200) {
            this.all.id = response.data.data
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      }

      //新建时候带进来客户信息 dwmc = khmc ？
      if(this.$route.query.khmc){
        this.all.dwmc = this.$route.query.khmc
      }
      // var that = this
      // axios.post('/Common/JSsign',{url: 'http://www.trtijian.com/baifang/index'}).then((response)=>{
      //   // this.cuowu = response.data
      // 	if (response.data.State == 200) {

      //     dd.config({
      //         agentId: response.data.agentId, // 必填，微应用ID
      //         corpId: response.data.corpId,//必填，企业ID
      //         timeStamp: response.data.timeStamp, // 必填，生成签名的时间戳
      //         nonceStr: response.data.nonceStr, // 必填，自定义固定字符串。
      //         signature: response.data.signature, // 必填，签名
      //         type:0,   //选填。0表示微应用的jsapi,1表示服务窗的jsapi；不填默认为0。该参数从dingtalk.js的0.8.3版本开始支持
      //         jsApiList: [
      //             'getLocation',
      //             'device.geolocation.get',
      //             'runtime.info',
      //             'biz.contact.choose',
      //             'device.notification.confirm',
      //             'device.notification.alert',
      //             'device.notification.prompt',
      //             'biz.ding.post',
      //             'biz.util.openLink',
      //         ] // 必填，需要使用的jsapi列表，注意：不要带dd。
      //     });

      //     dd.error(function(err){
      //       that.cuowu2 = err
      //         // console.error('dd error: ' + JSON.stringify(err));
      //         // error({errCode:-1,msg:'dd.error配置信息不对'})
      //     });

      //     // this.cuowu2 = dd.config()
      // 	} else {
      //     vant.Toast(response.data.msg);
      // 	}
      // })

      // if(this.$route.query.shenpi){
      //   this.what = 'shenpi'
      //   this.title = '客户审批'
      // }
      // if(this.$route.query.bianji){
      //   this.what = 'bianji'
      //   this.title = '客户编辑'
      // }
      // if(this.$route.query.gonghai){
      //   this.what = 'gonghai'
      //   this.title = '添加公海客户'
      // }
		},
		mounted() {
      // initDingH5RemoteDebug();
		},
		methods: {
      getkehulist:function(){
        axios.get('/Customer/queryCustomerList?fzrid='+JSON.parse(localStorage.getItem('person')).userid).then((response)=>{
        	if (response.data.state == 200) {

            response.data.data.forEach(item=>{
              let obj = {
                name:item.khmc,
                value:item.id
              }
              this.kehulist.push(obj)
            })

        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },
      hangyeConfirm:function(val){

      	// this.all.khid = val.value
        this.all.dwmc = val.name
      	this.suoshuhangyelog = false
      },
      hangyeCancel:function(val){
      	this.suoshuhangyelog = false
      },

      huoquweizhi:function(){
        var that = this

        dd.getLocation({
            type: 1,
            useCache: true,
            coordinate: '1',
            cacheTimeout: 20,
            withReGeocode: true,
            targetAccuracy: '200',
            success: (res) => {
                const { city, address, accuracy, latitude, province, longitude } = res;
                that.all.szwz = res.address
            },
            fail: (ex) => {
              that.cuowu = ex

            },
            complete: () => { },
        });

        // dd.getLocation({
        //       success(res) {

        //         that.all.szwz = res.address

        //       },
        //       fail() {
        //         vant.Toast('定位失败');
        //       },
        //     })
        // vant.Toast('测试222');
        // try{
        //   dd.getLocation({
        //     targetAccuracy: '200',
        //     cacheTimeout: 20,
        //     coordinate: '1',
        //     useCache: true,
        //     withReGeocode: true,
        //     type: 1,
        //     success: (res) => {
        //       vant.Toast('123' + res);
        //       const { address, province, city, latitude, accuracy, longitude } = res;
        //       this.all.szwz = address
        //     },
        //     fail: (fail) => {
        //       this.cuowu = fail
        //       vant.Toast('bbbbb'+fail);
        //     },
        //     complete: (c) => {
        //       vant.Toast('dddd'+c);
        //     },
        //   });
        // }catch(e){
        //   vant.Toast('aaaaa'+e);
        // }
        // dd.getLocation({
        //   targetAccuracy: '200',
        //   cacheTimeout: 20,
        //   coordinate: '1',
        //   useCache: true,
        //   withReGeocode: true,
        //   type: 1,
        //   success: (res) => {
        //     vant.Toast(res);
        //     const { address, province, city, latitude, accuracy, longitude } = res;
        //     this.all.szwz = address
        //   },
        //   fail: (fail) => {
        //     vant.Toast(fail);
        //   },
        //   complete: () => {

        //   },
        // });

        // vant.Toast('测试');
        // dd.device.geolocation.get({
        //     targetAccuracy: '200',
        //     cacheTimeout: 20,
        //     coordinate: '1',
        //     useCache: true,
        //     withReGeocode: true,
        //     type: 1,
        //     onSuccess : function(result) {
        //       vant.Toast('测试');
        //       vant.Toast(result);
        //     },
        //     onFail : function(err) {
        //       vant.Toast(err);
        //     }
        // });
      },
      shanchupic:function(item){

        axios.get('/Visit/deleteImage?id='+item).then((response2)=>{
        	if (response2.data.state ==  200) {
            this.get1()
        	} else {
            vant.Toast(response2.data.msg);
        	}
        })
      },
      get1:function(){
        axios.get('/Visit/queryVisitImageList?bfid='+this.all.id).then((response2)=>{
        	if (response2.data.state == 200) {
            this.picurl = response2.data.data
        	} else {
            vant.Toast(response2.data.msg);
        	}
        })
      },
      afterRead1:function(file){

        var formData = new FormData()
        formData.append("fileUpload",file.file)
        formData.append("bfid",this.all.id)
        formData.append("fzrid",JSON.parse(localStorage.getItem('person')).userid)

        axios.post('/Visit/uploadImage',formData).then((response)=>{
        	if (response.data.state == 200) {
            vant.Toast('上传成功');

            // 、this.picurl.push(response.data)

            this.get1()


        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },
      get2:function(){
        axios.get('/Visit/queryVisitFileList?bfid='+this.all.id).then((response2)=>{
        	if (response2.data.state == 200) {
            this.wordurl = response2.data.data
        	} else {
            vant.Toast(response2.data.msg);
        	}
        })
      },
      shanchupic:function(item){

        axios.get('/Visit/deleteFile?id='+item).then((response2)=>{
        	if (response2.data.state ==  200) {
            this.get2()
        	} else {
            vant.Toast(response2.data.msg);
        	}
        })
      },
      afterRead2:function(file){

        var formData = new FormData()
        formData.append("fileUpload",file.file)
        formData.append("bfid",this.all.id)
        formData.append("fzrid",JSON.parse(localStorage.getItem('person')).userid)

        axios.post('/Visit/uploadFile',formData).then((response)=>{
        	if (response.data.state == 200) {

            vant.Toast('上传成功');
            this.get2()
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },
      gonghaibaocun:function(){
        axios.post('/OpenCustomer/addOpencustomer',this.all).then((response)=>{
        	if (response.data.state == 200) {
            vant.Toast('新建公海客户成功');
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },
      shenpigo:function(val){
        this.shenpiall.khid = this.all.id
        this.shenpiall.fzrid = JSON.parse(localStorage.getItem('person')).userid
        this.shenpiall.spzt = val

        axios.post('/Process/updateCustomerProcess',this.shenpiall).then((response)=>{
        	if (response.data.state == 200) {
            vant.Toast('审批成功');
            this.$router.go(-1)
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },
      xiugai:function(){
        axios.post('/Customer/updateCustomer',this.all).then((response)=>{
        	if (response.data.state == 200) {
            vant.Toast('修改客户成功');
            this.back()
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },

      baocun:function(){
        axios.post('/Visit/addVisit',this.all).then((response)=>{
        	if (response.data.state == 200) {
            vant.Toast('新建拜访成功');
            this.$router.go(-1)
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },

      shijianConfirm:function(val){
        this.all.yjtjsj =  moment(val).format('YYYY-MM-DD')
      	this.shijianlog = false
      },
      shijianCancel:function(val){
        this.shijianlog = false
      },

      sexConfirm:function(val){
        this.all.xlkh = val
      	this.kehuleixinglog = false
      },
      sexCancel:function(val){
        this.kehuleixinglog = false
      },

      genjinConfirm:function(val){
      	this.all.bffs = val
      	this.genjinzhuangtailog = false
      },
      genjinCancel:function(val){
      	this.genjinzhuangtailog = false
      }


		}
	}
</script>

<style scoped lang="less">


    .yy {
      box-shadow: 0 0 0.1rem #eaeaea;
      padding: 0.2rem 0.3rem;
      margin-bottom: 0.3rem;
    }

    .act {
      background: #ccc !important;
      color: #FFFFFF;
      padding: 0.1rem 0.2rem;
      border-radius: 0.1rem;
    }

    .act1 {
      background: #fff;
      box-shadow: 0 0 0.1rem #eaeaea;
      padding: 0.1rem 0.2rem;
      margin-left: 0.2rem;
      border-radius: 0.1rem;
    }

</style>
